<template>
	<div class="mainContent spotOrderDetail">
		<div class="bread-nav">
			<span class="bread-item">供应商管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">物料管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item activeNavs" @click="back">退料列表</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">退料详情</span>
		</div>
		<!-- <pathTracking :path="Model.path" /> -->
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="退料单详情" name="1"></el-tab-pane>
				<el-tab-pane label="操作日志" name="2"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<!-- **********************************************               tab1  退料单详情                 ************************************** -->
				<div v-show="Model.activeTab==1">
					<!-- 物料明细 — 实退 -->
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">物料明细 — 实退</p>
						</div>
						<div class="detailTableDetail">
							<el-table stripe :data="Model.tab1TableData" border @selection-change="handleSelectionChange">
								<el-table-column type="index" align="center" width="50" label="序号" fixed></el-table-column>
								<el-table-column align="center" v-for="(item,index) in Model.tab1TableHeader" :key="index" :prop="item.prop"
								 :label="item.label" :width="item.width">
								</el-table-column>
								
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab2    操作日志              ************************************** -->
				<div v-show="Model.activeTab==2">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">操作日志</p>
						</div>
						<div class="detailTableDetail">
							<el-table :data="Model.tab9TableData" border max-height="550" @selection-change="handleSelectionChange">
								<el-table-column align="center" prop="createTime" label="时间" width="100"></el-table-column>
								<el-table-column align="center" prop="type" label="操作类型" width="120"></el-table-column>
								<el-table-column align="center" prop="createBy" label="操作人" width="120"></el-table-column>
								<el-table-column align="center" prop="record" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
<style>
	.spotOrderDetail .orderChangeDialog .el-dialog {
		width: 70%;
		height: 70%;
	}
</style>
